<template>
  <div class="answersheet">
    <van-popup v-model="show" position="bottom" :style="{ height: '90%' }">
      <!-- 头部 -->
      <van-nav-bar title="答题卡题" right-text="0/53题" />
      <!-- 标题 -->
      <van-cell-group>
        <van-cell title="共53题" class="questionTotal" />
      </van-cell-group>
      <!-- 选择列表 -->
      <ul class="questionList">
        <li
          class="selsctList"
          v-for="(item, index) in questionArr"
          :key="index"
        >
          {{ index + 1 }}
        </li>
      </ul>
    </van-popup>
  </div>
</template>

<script>
export default {
  props: ['questionArr'],
  data () {
    return {
      show: false
    }
  },
  methods: {},
  created () {}
}
</script>

<style lang="less" scoped>
.answersheet {
  /deep/.van-cell {
    background-color: #ccc;
  }
  .questionList {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;

    .selsctList {
      width: 40px;
      height: 40px;
      border: 1px solid #ccc;
      color: #ccc;
      margin: 5px 8px;
      border-radius: 50%;
      font-size: 16px;
      text-align: center;
      line-height: 40px;
    }
  }
}
</style>
